<template>
  <div class="BMI">
    <hr>
    <div v-if="isShowState">
      你的BMI值为："", 状态： ""
    </div>
    <Form1 @submit-data="handleSubmit"/>
    <hr>
    <BMIStatus :status="status"/>
    <!--    <BMIRecord :bmi-list="[{}]"/>-->
    <BMIRecord
      msg="BMI记录"
      :bmi-list="bmiList"
      @delete-item="delItem"
    />
  </div>
</template>

<script>
// @ === src
import BMIForm1 from "@/components/BMIForm";
import BMIStatus from "@/components/BMIStatus";
import BMIRecord from "@/components/BMIRecord";
import axios from "axios"

export default {
  name: 'App',
  components: {
    Form1: BMIForm1,
    BMIStatus,
    BMIRecord
  },
  data() {
    return {
      msg: "你好 vue !!!",
      isShowState: false,
      bmiList: [],
      status: ""
    }
  },
  created() {
    axios({
      url: "http://yizhanketang.com:1010/api/v1/bmi"
    }).then(res => {
      this.bmiList = res.data
    })
  },
  methods: {
    async delItem(id) {
      await axios({
        method: "DELETE",
        url: `http://yizhanketang.com:1010/api/v1/bmi/${id}`,
      })
      const res = await axios({
        url: "http://yizhanketang.com:1010/api/v1/bmi"
      })
      this.bmiList = res.data
    },
    async handleSubmit(data) {
      const newItem = await axios({
        method: "POST",
        url: "http://yizhanketang.com:1010/api/v1/bmi",
        data,
      })
      this.status = newItem.data.status
      const res = await axios({
        url: "http://yizhanketang.com:1010/api/v1/bmi"
      })
      this.bmiList = res.data

      // this.isShowState = true
      /*
      axios({
        method: "POST",
        url: "http://yizhanketang.com:1010/api/v1/bmi",
        data,
      }).then(() => {
        // console.log(res)
        // this.bmiList.push(res.data)
        // this.bmiList.unshift(res.data)
        axios({
          url: "http://yizhanketang.com:1010/api/v1/bmi"
        }).then(res => {
          this.bmiList = res.data
        })
      })*/
    },
  }
  // template: ""
}
</script>
